<template>
  <div class="cart">
       <nav-bar :edit="true">
          <template v-slot:left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
          <template v-slot:center>购物车</template>
          <template #right>
          </template>
       </nav-bar>
        <cart-detail v-if="isShow"></cart-detail>
       <Blank v-else></Blank> 
      <tab-bar></tab-bar>
  </div>
</template>

<script>
import TabBar from '../components/common/TabBar.vue'
import NavBar from '../components/common/NavBar.vue'
import Blank from '../components/common/Blank.vue'
import CartDetail from '../components/content/CartDetail.vue'

import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import { computed } from '@vue/runtime-core'
export default {
  name:'Cart',
  components:{
    TabBar,
    Blank,
    NavBar,
    CartDetail
  },
  setup(){
    const store = useStore();
    const router = useRouter()
    const isShow = computed(()=>{
      return store.state.cartList.some(item=>item.num>=1);
    })
    const backHome=()=>{
      router.push('/store');
    }
    return {isShow,backHome}
  }
}
</script>

<style lang="less" scoped>
.cart{
  position: relative;
  height: 100vh;
  background-color: #f4f4f4;
}
</style>